<template>
  <Dialoger v-model="isShow" :onConfirm="handleSubmit" :dialogCls="'d-paner-md'" title="编辑">
    <template v-slot:body>
      <div class="d-row">
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">环境</label>
          </div>
          <div class="d-form-el">
            <FormSelecter v-model="envId" :data="envList" value-key="id" :text-key="'code'" slide-max-height="200px" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">规则</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.rule" class="d-form-input" type="text" readonly />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">值</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.value" class="d-form-input" type="text" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">排序</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.order" class="d-form-input" type="text" placeholder="数值越大越靠前" />
          </div>
        </div>
        <FormCalendar
          v-if="isEdit"
          v-model="state.updateTime"
          :isEditAble="false"
          :readonly="true"
          format="yyyy-MM-dd HH:mm:ss"
          label="修改时间"
          labelWidth="90px"
          class="d-form-group-flex d-col-xs-12"
        ></FormCalendar>
        <div v-if="false && isEdit" class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">修改人</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.updateUser" class="d-form-input" type="text" readonly />
          </div>
        </div>
        <FormCalendar
          v-if="isEdit"
          v-model="state.createTime"
          :isEditAble="false"
          :readonly="true"
          format="yyyy-MM-dd HH:mm:ss"
          label="创建时间"
          labelWidth="90px"
          class="d-form-group-flex d-col-xs-12"
        ></FormCalendar>
        <div v-if="false && isEdit" class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">创建人</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.createUser" class="d-form-input" type="text" readonly />
          </div>
        </div>
      </div>
    </template>
  </Dialoger>
</template>

<script>
import { PanerForm } from '@daelui/vdog/dist/pages.js'
import { Dialoger, FormCalendar, FormSelecter } from '@daelui/vdog/dist/components'
import { zh as locale } from '@daelui/dogjs/dist/locale'
import dictionarySer from '../../../service/action/dictionary.action'
import { CACHE_TYPE } from '../../../service/components/ds'
import naveBus from '../business/nave'

export default {
  components: {
    PanerForm,
    FormCalendar,
    Dialoger,
    FormSelecter
  },

  data () {
    return {
      isShow: false, // 窗口是否显示
      isEdit: false, // 是否是编辑模式
      // 编辑信息
      editInfo: {},
      // 环境信息
      envId: '',
      // 表单数据
      state: {
        id: '',
        cat: '',
        code: '',
        key: '',
        value: '',
        order: 1,
        rule: ''
      },
      // 环境类型列表
      envList: [],
      // 规则与环境配置列表
      ruleEnvList: []
    }
  },

  watch: {
    'envId' () {
      this.handleChageEnv()
    }
  },

  methods: {
    /**
     * @function 显示与隐藏
    */
    show (data) {
      this.isShow = !!data
      data = data || {}
      this.editInfo = data
      // 查询指定规则的配置
      dictionarySer.queryList({
        cat: 'rule-env',
        code: this.editInfo.id
      }).then(res => {
        this.ruleEnvList = res.data
        // 默认选中第个匹配环境
        let env = this.envList.find(item => {
          let b = false
          (this.ruleEnvList || []).forEach(node => {
            if (item.id === node.key) {
              b = true
            }
          })
          return b
        })
        if (!env) {
          env = this.envList[0] || {}
        }
        this.envId = env.id || ''
        this.handleChageEnv()
      })
    },

    /**
     * @function 提交
    */
    handleSubmit () {
      let defer = null
      let data = Object.assign({}, this.state)
      // 编辑
      if (data.id) {
        defer = dictionarySer.editItem(data)
      } else { // 添加
        defer = dictionarySer.addItem(data)
      }
      defer.then(result => {
        let b = true
        if (result.success) {
          Dialoger.success(locale.action.success)
          this.$emit('onSubmitSuccess', data)
        } else {
          b = false
          Dialoger.danger(locale.action.fail)
        }
        return b
      })
      return false
    },
    // 切换环境
    handleChageEnv () {
      // 取与环境相匹配的规则
      let item = this.ruleEnvList.find(node => {
        let b = false
        if (this.envId === node.key) {
          b = true
        }
        return b
      })
      if (!item) {
        item = {
          id: '',
          cat: 'rule-env',
          code: this.editInfo.id,
          key: this.envId,
          value: '',
          order: 1,
          rule: ''
        }
      }
      item.rule = this.editInfo.key
      this.state = item
    }
  },

  mounted () {
    // 环境类型
    naveBus.queryTreeEnv({
      cat: 'nave-envirment'
    }, {cache: true, cacheType: CACHE_TYPE.SESSION, buffer: true}).then(list => {
      this.envList = list
    })
  }
}
</script>

<style lang="less" scoped>
.d-row {
  .d-form-group:last-child {
    margin-bottom: 0;
  }
}
.d-form-label {
  width: 90px;
}
.d-form-textarea {
  min-height: 320px;
}
</style>
